<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryForm"
        :label-width="$i18n.locale === 'en' ? '140px' : '100px'"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item :label="dataList.DeviceNumber" prop="deviceNum">
              <el-input
                v-model="queryForm.deviceNum"
                :placeholder="dataList.DeviceNumber"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="
                $i18n.locale === 'en'
                  ? dataList.DeviceEName
                  : dataList.DeviceName
              "
              prop="deviceName"
            >
              <el-input
                v-model="queryForm.deviceName"
                :placeholder="dataList.DeviceName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="dataList.DeviceSpecifications"
              prop="specifications"
            >
              <el-input
                v-model="queryForm.specifications"
                :placeholder="dataList.DeviceSpecifications"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="dataList.DevicePersonResponsibleId"
              prop="personResponsibleName"
            >
              <el-input
                v-model="queryForm.personResponsibleName"
                :placeholder="dataList.DevicePersonResponsibleId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="dataList.ChangedStatus" prop="statusIdAfter">
              <div style="width: 200px">
                <DicDropDownList
                  v-model="queryForm.statusIdAfter"
                  dict-code="deviceStatusList"
                  :is-all="true"
                ></DicDropDownList>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="
                $i18n.locale === 'en'
                  ? dataList.eDeviceStorageAddress
                  : dataList.DeviceStorageAddress
              "
              prop="storageAddress"
            >
              <el-input
                v-model="queryForm.storageAddress"
                :placeholder="dataList.DeviceStorageAddress"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="dataList.TimeOfChange" prop="createTimeArray">
              <el-date-picker
                v-model="queryForm.createTimeArray"
                style="width: 230px"
                type="daterange"
                :range-separator="dataList.To"
                :start-placeholder="dataList.StartDate"
                :end-placeholder="dataList.EndDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item :label="dataList.SourceDocument" prop="orderNum">
              <el-input
                v-model="queryForm.orderNum"
                :placeholder="dataList.SourceDocument"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="base-content-operate">
        <el-button type="primary" @click="onQuery">{{ btn.Query }}</el-button>
        <el-button @click="cancelForm">{{ btn.Reset }}</el-button>
        <el-button icon="el-icon-download" type="primary" @click="Export">{{
          btn.Export
        }}</el-button>
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        height="250"
        fit
        highlight-current-row
      >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.deviceNum }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.deviceName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en'
              ? dataList.eDeviceStorageAddress
              : dataList.DeviceStorageAddress
          "
        >
          <template slot-scope="scope">
            {{ scope.row.storageAddress }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.PreviousStatus">
          <template slot-scope="scope">
            {{ scope.row.statusNameBefore }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.ChangedStatus">
          <template slot-scope="scope">
            {{ isDefaultTime(scope.row.statusNameAfter) }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.TimeOfChange">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.SourceDocument">
          <template slot-scope="scope">
            {{ scope.row.orderNum }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.SourceDocumentType">
          <template slot-scope="scope">
            {{ scope.row.orderType }}
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getList } from "../../api/DeviceLog";
import DicDropDownList from "../../components/DicDropDownList.vue";
import { export_json_to_excel } from "@/vendor/Export2Excel";
import { isDefaultTime } from "../../utils/tool";
import { formatTimeMin, formatTimeMax } from "../../utils/time";
export default {
  name: "DeviceLogList",
  components: {
    DicDropDownList,
  },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      list: [],
      classifyList: [],

      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      queryForm: {
        deviceNum: "",
        deviceName: "",
        specifications: "",
        storageAddress: "",
        personResponsibleName: "",
        statusIdAfter: "-1",
        statusIdBefore: 0,
        orderNum: "",
        orderType: "",
        createTimeArray: [],
        departId: sessionStorage.getItem("currentDepartmentId"),
      },
      // tHeader: [
      //   "设备编号",
      //   "设备名称",
      //   "型号规格",
      //   "存放地点",
      //   "责任人",
      //   "变更前状态",
      //   "变更后状态",
      //   "变更时间",
      //   "来源单据",
      //   "来源单据类型",
      // ],
      filterVal: [
        "deviceNum",
        "deviceName",
        "specifications",
        "storageAddress",
        "personResponsibleName",
        "statusNameBefore",
        "statusNameAfter",
        "createTime",
        "orderNum",
        "orderType",
      ],
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    isDefaultTime,
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },

    getList() {
      if (this.queryForm.createTimeArray.length > 0) {
        this.queryForm.startCreateTime = formatTimeMin(
          this.queryForm.createTimeArray[0]
        );
        this.queryForm.endCreateTime = formatTimeMax(
          this.queryForm.createTimeArray[1]
        );
      } else {
        this.queryForm.startCreateTime = null;
        this.queryForm.endCreateTime = null;
      }
      // this.queryForm.departId =  sessionStorage.getItem("currentDepartmentId");

      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onView(rowData) {
      this.readonly = true;
      this.editId = rowData.id;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.dialogFormVisible = false;
      this.getList();
    },
    export_json_to_excel,
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    Export() {
      getList(this.queryForm, { pageIndex: 1, pageSize: 10000 })
        .then((res) => {
          // for (var i = 0; i < res.data.dataList.length; i++) {
          //   res.data.dataList[i].status = this.Status[res.data.dataList[i].status]
          // }
          var data = this.formatJson(this.filterVal, res.data.dataList);

          const tHeader = [
            this.dataList.DeviceNumber,
            this.dataList.DeviceName,
            this.dataList.DeviceSpecifications,
            this.dataList.DeviceStorageAddress,
            this.dataList.DevicePersonResponsibleId,
            this.dataList.PreviousStatus,
            this.dataList.ChangedStatus,
            this.dataList.TimeOfChange,
            this.dataList.SourceDocument,
            this.dataList.SourceDocumentType,
          ];
          export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: this.dataList.EquipStatusChangeRecord, // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped></style>
